<template>
  <div class="search">
    <van-search v-model="value" shape="round" right-icon='scan' placeholder="请输入搜索关键词" @search="cat">
      <template #left>
        <van-icon name="arrow-left" @click="fan" />
      </template>
    </van-search>
    <div class="center">
      <van-card v-for="(item,index) in data_base" :key="index+'px'" :title="item.name" :desc="item.text"
        :thumb="item.imgs[0].url" @click="to_shopping(item)">
        <template #desc>
          <p class="two">[新品火爆抢购中,{{item.text}}]</p>
          <van-grid :column-num="3" :center="false">
            <van-grid-item v-for="(item1,index1) in item.list.slice(0,3)" :key="index1+'sss'">
              <p class="one">{{item1.text1}}</p>
              <p class="one">{{item1.text2}}</p>
            </van-grid-item>
          </van-grid>
        </template>
        <template #price>
          <div>
            <span class="two three">￥{{item.price}}</span>
          </div>
        </template>
      </van-card>
      <van-empty v-if="data_base.length==0" description="搜索的商品不存在" />
      <van-popup v-model="show" position="right" :style="{ width: '100%',height:'101%' }">
        <shopping v-on:exit="show=false" :data_base='form'></shopping>
      </van-popup>
    </div>
  </div>
</template>

<script>
import shopping from "./shopping.vue";
export default {
  components: { shopping },
  data() {
    return {
      data_base: "",
      value: "",
      num: 0,
      show: false,
      form: "",
    };
  },
  created() {
    this.geyDate();
  },
  methods: {
    fan() {
      this.$router.go(-1);
    },
    geyDate() {
      let search = localStorage.getItem("search");
      search = JSON.parse(search);
      this.value = search.text;
      let myurl = this.$url +"goods_read";
      this.axios.post(myurl).then((res) => {
        let a = res.data.data;
        a = a.replace(/\\r\\n/g, "");
        a = a.replace(/\\/g, "");
        a = a.replace(/:"\[/g, ":[");
        a = a.replace(/\]"/g, "]");
        a = a.replace(/:"{/g, ":{");
        a = a.replace(/}"/g, "}");
        a = JSON.parse(a);
        if (search.text == "") {
          this.data_base = a;
        } else {
          this.data_base = [];
          for (let i = 0; i < a.length; i++) {
            if (
              a[i].name.toLowerCase().indexOf(search.text.toLowerCase()) !=
                -1 ||
              a[i].classify.indexOf(search.text.toLowerCase()) != -1
            ) {
              this.data_base.push(a[i]);
            }
          }
        }
      });
      this.$forceUpdate();
      console.log(search);
    },
    cat() {
      let search = { text: this.value };
      search = JSON.stringify(search);
      localStorage.setItem("search", search);
      this.geyDate();
    },
    //显示结果
    show_goods() {
      console.log(111);
    },
    to_shopping(a) {
      this.form = a;
      this.show = true;
    },
  },
  mounted() {
    this.$nextTick(function () {
      //去掉宫格的背景色
      let a = document.querySelectorAll(".van-grid-item__content");
      for (let i = 0; i < a.length; i++) {
        a[i].style.backgroundColor = "rgba(0, 0, 0, 0)";
      }
    });
    //搜索框定位问题
    let b = document.querySelector(".van-search").offsetHeight;
    document.querySelector(".center").style.top = b + "px";
    this.$forceUpdate();
  },
};
</script>

<style scoped>
.one {
  font-size: 10px;
  text-align: center;
  margin: 0;
}
.two {
  color: red;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 20em;
}
.three {
  font-size: 17px;
}
.search {
  height: 100%;
  overflow: auto;
}
.search::-webkit-scrollbar {
  display: none;
}
.van-search {
  position: fixed;
  z-index: 99;
  width: 100%;
}
.center {
  position: relative;
}
</style>